<template>
  <el-dialog
    title="自定义二押点"
    :visible.sync="dialogVisible"
    width="50%"
    class="second-dialog"
  >
    <div class="second-box">
      <div class="search-point">
        <input id="seSuggest" />

        <div id="secondMap"></div>

        <ul class="map-tools">
          <el-tooltip content="开始绘制" placement="left" effect="light">
            <li @click="initPaintPolygon">1</li>
          </el-tooltip>
          <el-tooltip content="测距" placement="left" effect="light">
            <li @click="startDistance">2</li>
          </el-tooltip>
          <el-tooltip content="卫星地图" placement="left" effect="light">
            <li @click="changeMapType">3</li>
          </el-tooltip>
        </ul>
      </div>
      <div class="second">
        <el-form ref="form" :model="form" label-width="140px">
          <el-form-item label="二押点名称">
            <el-input v-model="form.name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="二押点的范围为(米)">
            <el-input v-model="form.region" size="small"></el-input>
          </el-form-item>
          <el-form-item label="停留时间：">
            60分钟
          </el-form-item>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      map: null,
      tableData: [],
      searchResult: "",
      form: {
        name: "",
        region: "",
        path: null,
        time: 0
      },
      overlay: null
    };
  },

  methods: {
    show() {
      this.dialogVisible = !this.dialogVisible;

      this.$nextTick(() => {
        this.initMap();
      });
    },

    initMap() {
      this.map = new BMap.Map("secondMap");
      var point = new BMap.Point(116.404, 39.915);
      this.map.centerAndZoom(point, 15);
      this.map.enableScrollWheelZoom(true);

      // this.initPaintPolygon();

      let ac = new BMap.Autocomplete({
        input: "seSuggest",
        location: this.map
      }); //建立一个自动完成的对象
      ac.addEventListener("onconfirm", e => {
        var _value = e.item.value;
        this.searchResult =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;

        this.moveCenter();
      });
    },

    moveCenter() {
      let that = this;
      function myFun() {
        var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
        // that.form.point = pp;
        that.map.centerAndZoom(pp, 18);
      }
      var local = new BMap.LocalSearch(this.map, {
        //智能搜索
        onSearchComplete: myFun
      });
      local.search(this.searchResult);
    },

    handleSubmit() {
      this.dialogVisible = false;
      this.$emit("submit", JSON.parse(JSON.stringify(this.form)));
    },

    initPaintPolygon() {
      var drawingManager = new BMapLib.DrawingManager(this.map, {
        isOpen: true
      });

      drawingManager.setDrawingMode(BMAP_DRAWING_MARKER);

      drawingManager.addEventListener("overlaycomplete", e => {
        let marker = e.overlay;
        this.form.point = e.overlay.point;
        marker.enableDragging();
        marker.addEventListener("dragend", e => {
          this.form.point = e.point;
        });
        drawingManager.close();
      });
    },

    startDistance() {
      var DistanceTool = new BMapLib.DistanceTool(this.map, { lineStroke: 2 });
      DistanceTool.open();
      DistanceTool.addEventListener("drawend", () => {
        DistanceTool.close();
      });
    },

    changeMapType() {
      let mapType =
        this.map.getMapType() === BMAP_NORMAL_MAP
          ? BMAP_SATELLITE_MAP
          : BMAP_NORMAL_MAP;
      this.map.setMapType(mapType);
    }
  }
};
</script>

<style lang="scss">
.second-dialog {
  .el-dialog__header {
    background-color: #479de6 !important;

    .el-dialog__title,
    .el-dialog__close {
      color: #fff;
    }
  }

  .el-dialog__body {
    padding: 10px;
  }

  .second-box {
    height: 600px;
    display: flex;

    .search-point {
      flex: 1;
      position: relative;

      .map-tools {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        li {
          width: 50px;
          height: 50px;
          line-height: 50px;
          background: white;
          text-align: center;
          border-bottom: 1px solid #e6e6e6;
          cursor: pointer;

          // &:hover {
          //   color: ;
          // }
        }
      }
    }

    .point-message {
      flex: 0 0 250px;
    }
  }

  #secondMap {
    height: calc(100% - 32px);
    margin-top: 10px;
  }

  #seSuggest {
    height: 40px;
    width: 100%;
    outline: none;
  }
}

.tangram-suggestion-main {
  z-index: 1000000;
}
</style>
